<template>
  <el-dialog :visible="explainDialogVisible"
             :close-on-click-modal="false"
             append-to-body
             @close="onClose"
             custom-class="trace-dailog">
    <el-tabs v-model="activeName"
             type="card">
      <el-tab-pane label="成熟度说明"
                   name="maturity">
        <el-table :data="matutityData"
                  border
                  stripe>
          <el-table-column prop="name"
                           label="成熟度"
                           align="center"
                           width="100"></el-table-column>
          <el-table-column prop="remark"
                           label="成熟度说明"
                           align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="跟踪等级说明"
                   name="level">
        <el-table :data="levelData"
                  border
                  :span-method="objectSpanMethod"
                  stripe>
          <el-table-column prop="name"
                           label="等级"
                           align="center"
                           width="100"></el-table-column>
          <el-table-column prop="remark"
                           label="划分定义"
                           align="center"></el-table-column>
          <el-table-column prop="remark1"
                           label="更新频率"
                           align="center"
                           width="300"></el-table-column>
          <el-table-column prop="remark2"
                           label="项目分布"
                           align="center"
                           width="200"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  props: {
    explainDialogVisible: Boolean
  },
  data() {
    return {
      activeName: 'maturity',
      levelData: [
        {
          name: '重点客户',
          remark: `1）当月计划签订落单的客户  2）计划下月签订且金额大于5万的客户 3）计划第三个月签订且金额大于10万的客户`,
          remark1: '按周，及时更新跟踪记录',
          remark2: '老客户新增： 1）除续保外的新增项目 2）2年内未有重新合作过的老客户项目签订 新客户拓展：新挖掘客户所产出的新项目 续保：延续前年的续签运行维护项目'
        },
        {
          name: '中等客户',
          remark: '1）计划下月签订且金额≤5万的客户  2）计划第三个月签订且金额5万-10万的客户',
          remark1: '半月/随时，及时更新跟踪记录'
        },
        {
          name: '一般客户',
          remark: '其他所有',
          remark1: '按客户跟进情况，做好客情维护，及时更新跟踪记录'
        }
      ],
      matutityData: [
        {
          name: '0%',
          remark: '可续保，但还未到期；项目还未开展'
        },
        {
          name: '10%',
          remark: '客户有意向，有需求，可续的可能性变大'
        },
        {
          name: '20%',
          remark: '有跟客户沟通过，发过续保方案、合同'
        },
        {
          name: '30%',
          remark: '业主有项目建设的资金来源保障'
        },
        {
          name: '50%',
          remark: '客户有意向给我们做，我司有竞争优势'
        },
        {
          name: '80%',
          remark: '合同谈判沟通'
        },
        {
          name: '90%',
          remark: '公司内部合同审核流程'
        },
        {
          name: '已签',
          remark: '合同归档'
        }
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    onClose() {
      this.$emit('close')
    }
  }
}
</script>
